<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>智能创作平台</title>

    <link rel="stylesheet" href="css/index.css" >
    <link rel="stylesheet" href="css/all_header.css" >
    <script src="js/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="js/marked.min.js"></script>
    <script src="../static/js/marked.min.js"></script>
    <script src="js/time.js"></script>
    <!--google fonts-->
    <link href="css/css2" rel="stylesheet">
    <!-- Boxicons -->
    <link href="css/boxicons.min.css" rel="stylesheet">
    <!-- insha style css-->
    <link rel="stylesheet" href="css/insha-style.css">
    <link rel="stylesheet" href="css/platform.css">
</head>


<body>
<!-- main wrapper -->
<div class="main">
    <div class="sidebar">
        <div class="logo_content">
            <div class="logo">
                <div class="logo_name">
                    <a href="">
                        <i class="bx bx-meteor"></i>
                        智能创作平台
                    </a>
                </div>
            </div>
            <i class="bx bx-menu" id="toggle-menu-btn"></i>
        </div>
        <ul class="nav_list">
            <li>
                <i class="bx bx-search search-btn"></i>
                <input type="text" placeholder="搜索...">
                <span class="tooltip">搜索</span>
            </li>
            <li>
                <a href="/platform">
                    <i class="bx bx-grid-alt"></i>
                    <span class="links_name">创作中心</span>
                </a>
                <span class="tooltip">创作中心</span>
            </li>
            <li>
                <a href="/userInfo">
                    <i class="bx bx-user"></i>
                    <span class="links_name">用户信息</span>
                </a>
                <span class="tooltip">用户信息</span>
            </li>
            <li>
                <a href="/history">
                    <i class="bx bx-history"></i>
                    <span class="links_name">创作历史</span>
                </a>
                <span class="tooltip">创作历史</span>
            </li>
            <li>
                <a href="/trash">
                    <i class="bx bx-recycle"></i>
                    <span class="links_name">回收站</span>
                </a>
                <span class="tooltip">回收站</span>
            </li>
            <li>
                <a href="/help">
                    <i class="bx bx-help-circle"></i>
                    <span class="links_name">帮助文档</span>
                </a>
                <span class="tooltip">帮助文档</span>
            </li>
        </ul>
        <div class="profile_content">
            <div class="profile">
                <div class="profile_details">
                    <img src="images/logo.jpg" alt="profile">
                    <div class="name_job">
                        <div class="name">版权所有</div>
                        <div class="job">中国矿业大学</div>
                    </div>
                </div>
                <i class="bx bx-log-out" id="log_out" onclick="userExit()" style="cursor: pointer"></i>
            </div>
        </div>
    </div>
    <script>
        function userExit(){
            var exitOrNot = confirm("确认退出吗，账号将注销");
            if (exitOrNot === true){
                window.location.href="/exit";
            } else  {
            }
        }
    </script>
    <div class="home_content"  style="overflow:auto;" >
            <div class="all_header">
                <div class="top_container">
                    <div class="page_title">帮助文档</div>
                    <div class="ts">
                        <span class="date"></span>
                        <span class="second"></span>
                    </div>
                </div>
            </div>
            <div class="split"></div>
            <div class="help_content" id="help_content"></div>
    </div>
</div>
<script>
    function getMKTitles (mkContent) {
        var nav = []
        var navLevel = []

        mkContent
            .replace(/```/g, function () {
                return '\f'
            })
            .replace(/\f[^\f]*?\f/g, function (match) {
                return ''
            })
            .replace(/\r|\n+/g, function (match) {
                return '\n'
            })
            .replace(/(#+)[^\n]*?(?:\n)/g, function (match, m1, m2) {
                var title = match.replace('\n', '')
                var level = m1.length
                nav.push({
                    title: title.replace(/^#+/, '').replace(/\([^)]*?\)/, ''),
                    level: level,
                    children: []
                })
                if (navLevel.indexOf(level) === -1 && level !== 1) { // =1 为标题
                    navLevel.push(level)
                }
            })

        // 去掉title
        if (nav[0].level === 1) {
            nav.shift()
        }

        var index = 0
        nav = nav.map(item => {
            item.index = index++
            return item
        })

        navLevel = navLevel.sort()

        var retNavs = []
        var toAppendNavList

        navLevel.forEach(level => {
            toAppendNavList = find(nav, {
                level: level
            })

            if (retNavs.length === 0) {
                retNavs = retNavs.concat(toAppendNavList)
            } else {
                toAppendNavList.forEach(toAppendNav => {
                    toAppendNav = Object.assign(toAppendNav)
                    let parentNavIndex = getParentIndex(nav, toAppendNav.index)

                    return appendToParentNav(retNavs, parentNavIndex, toAppendNav)
                })
            }
        })

        // 同一级的Level不一样的时候，需要做顺序调整
        retNavs = retNavs.map(navItem => {
            var children = navItem.children || []
            if (children.length === 0) {
                return navItem
            }
            navItem.children = indexSort(navItem.children)
            return navItem
        })

        return {
            nav: retNavs, // 所有mk标题
            navLevel: navLevel, // 所有标题层级
            length: nav.length // 标题长度
        }
    }

    function find (arr, condition) {
        return arr.filter(item => {
            for (var key in condition) {
                if (condition.hasOwnProperty(key) && condition[key] !== item[key]) {
                    return false
                }
            }
            return true
        })
    }

    function findIndex (arr, condition) {
        let ret = -1
        arr.forEach((item, index) => {
            for (var key in condition) {
                if (condition.hasOwnProperty(key) && condition[key] !== item[key]) { // 不进行深比较
                    return false
                }
            }
            ret = index
        })
        return ret
    }

    function getParentIndex (nav, endIndex) {
        for (var i = endIndex - 1; i >= 0; i--) {
            if (nav[endIndex].level > nav[i].level) {
                return nav[i].index
            }
        }
    }

    function appendToParentNav (nav, parentIndex, newNav) {
        // 先第一级里面找，找不到再去children中去找
        let index = findIndex(nav, {
            index: parentIndex
        })

        if (index === -1) {
            let subNav

            for (var i = 0; i < nav.length; i++) {
                subNav = nav[i]
                subNav.children.length && appendToParentNav(subNav.children, parentIndex, newNav)
            }
        } else {
            nav[index].children = nav[index].children.concat(newNav)
        }
    }

    function indexSort (navList) {
        // 有子元素，检查level是否相同
        var needSort = find(navList, {
            level: navList[0].level
        }).length !== navList.length

        if (needSort === false) return navList

        return navList.map(nav => {
            return nav.index
        }).sort().map(index => {
            var nav = find(navList, {
                index: index
            })

            if ((nav.children || []).length > 1) {
                nav.children = indexSort(nav.children)
            }

            return nav[0]
        })
    }

    export default getMKTitles
</script>
<script>
    $(function(){
        $.ajax({
            type:"get",
            url:"/help.md",
            dataType:"html",
            success:function(res){
                $("#help_content").append(marked.parse(res));
            }
        })
    });
</script>
<script src="js/sidebar.js"></script>
</body>
</html>